<template>
  <div class="tab-bar">
    <template v-for="(item, index) in tabbarData" :key="index">
      <div class="tab-bar-item" :class="{ active: currentIndex === index }" @click="itemClick(item,index)">
        <img
          :src="
            currentIndex === index
              ? getAssetURL(item.imageActive)
              : getAssetURL(item.image)
          "
          alt=""
        />
        <span class="text">{{ item.text }}</span>
      </div>
    </template>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { getAssetURL } from "@/utils/load_assets";
import {useRouter} from 'vue-router'
const tabbarData = [
  {
    text: "首页",
    image: "/tabbar/首页.png",
    imageActive: "/tabbar/首页选中.png",
    path: "/home",
  },
  {
    text: "收藏",
    image: "/tabbar/收藏.png",
    imageActive: "/tabbar/收藏选中.png",
    path: "/favor",
  },
  {
    text: "订单",
    image: "/tabbar/订单.png",
    imageActive: "/tabbar/订单选中.png",
    path: "/order",
  },
  {
    text: "消息",
    image: "/tabbar/消息.png",
    imageActive: "/tabbar/消息选中.png",
    path: "/message",
  },
];

const router = useRouter()
const currentIndex = ref(0);

const itemClick = (item,index)=>{
    currentIndex.value = index;
    router.push(item.path)
}
</script>
<style lang="less" scoped>
/*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
/*主样式*/
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  border-top: 1px solid #f3f3f3;
  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &.active {
      color: var(--primary-color);
    }
    .text {
      margin-top: 5px;
      font-size: 12px;
    }
    img {
      width: 30px;
    }
  }
}
</style>
